<div style="display: flex; flex-direction: column; gap: 10px">
  <div style="display: flex; gap: 5px">
    <b-button id="plus">增加步长</b-button>
    <b-button id="minus">减少步长</b-button>
  </div>
  <span id="displayStep">当前步长: 1</span>
  <b-stepper></b-stepper>
</div>

<script>
  const displayStepEl = document.getElementById('displayStep');
  const stepper = document.querySelector('b-stepper');
  const plusStepBtn = document.getElementById('plus');
  const minusStepBtn = document.getElementById('minus');

  plusStepBtn.addEventListener('click', () => {
    stepper.step += 1;
    displayStepEl.textContent = `当前步长: ${stepper.step}`;
  });
  minusStepBtn.addEventListener('click', () => {
    stepper.step -= 1;
    displayStepEl.textContent = `当前步长: ${stepper.step}`;
  });
</script>
